<template>
	<view>
		<view class="addrlist">
			<view class="" v-for="(item,index) in addrlist" :key="index">
				<view class="addr_item">
					<view class="" @click="checkaddr(item)">
						<view class="contacts">
							<text style="font-size: 32rpx;color: #333333;">{{item.username}}</text>
							<text style="font-size: 32rpx;color: #9A9A9A;margin-right: 10rpx;">{{item.mobile}}</text>
						</view>
						<view class="addr">
							{{item.detail}}
							<!-- {{item.detail}} -->
						</view>
					</view>
					
					<view class="caoz flex">
						<view class="caoz_left flex" @click="checkmr(index)">
							<view class="check_box">
								<image v-if="item.is_default == 1" class="check_icon" src="./static/check.png"
									mode=""></image>
							</view>
							<view class="label">
								默认地址
							</view>
						</view>
						<view class="caoz_right flex">
							<view class="" @click="del(item.id)">
								删除
							</view>
							<text style="color: #C9C6C6;margin: 0 30rpx;">|</text>
							<view class="" @click="toaddr(item.id)">
								编辑
							</view>
						</view>
					</view>

				</view>
				<view class="item_line" v-if="addrlist.length-1!=index">

				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="toaddr()">
				添加新地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ourAddress,
		changeAddressDefault,
		deleteAddress,
		editAddress
	} from '@/api/my.js'
	export default {
		data() {
			return {
				addrlist: [],
				cui: 0
			};
		},
		methods: {
			checkmr(i) {
				if (i == this.cui) {
					return
				}
				this.cui = i
				this.addrlist.map(t => {
					t.is_default = 0
				})
				this.addrlist[i].is_default = 1
				changeAddressDefault({
					id: this.addrlist[i].id
				}).then(res => {
					console.log(res.data)
				})
			},
			toaddr(id) {
				// pages/addr/aeaddr
				console.log(id)
				// 判断新增还是修改
				if (id) {
					uni.navigateTo({
						url:'/pages/addr/aeaddr?id='+id
					})
				} else {
					uni.navigateTo({
						url:'/pages/addr/aeaddr'
					})
				}
			},
			// 获取我的收货地址
			getOurAddress() {
				ourAddress({
					page: 1
				}).then(res => {
					let data = res.data.data.data.sort(this.compare('is_default'))
					this.addrlist = res.data.data.data
				})
			},
			// 排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1; //升序排序
				}
			},
			// 删除
			del(id) {
				let _this = this
				uni.showModal({
					content: '确定要删除该地址？',
					success(res) {
						if (res.confirm) {
							deleteAddress({
								id
							}).then(res => {
								if (res.data.code == 1) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
									_this.getOurAddress()
									if(id==uni.getStorageSync('curaddr').id){
										uni.removeStorageSync('curaddr')
									}
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								}
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				})
			},
			// 选择地址
			checkaddr(item){
				uni.setStorageSync('curaddr',item)
				uni.navigateBack()
			}
		},
		onShow() {
			this.getOurAddress()
		}
	}
</script>

<style lang="less">
	.addrlist {
		border-top: 2rpx solid #F7F6F6;
		padding-bottom: 200rpx;

		.addr_item {
			padding: 43rpx 30rpx 31rpx 22rpx;

			.addr {
				font-size: 25rpx;
				color: #333333;
				padding: 20rpx 0 30rpx;
				border-bottom: 1rpx solid #F6F3F3;

			}

			.caoz {
				justify-content: space-between;
				margin-top: 26rpx;
			}

			.check_box {
				width: 32rpx;
				height: 32rpx;
				border: 1rpx solid #999999;
				position: relative;
				border-radius: 50%;

				.check_icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 0rpx;
					left: 0rpx;
				}
			}

			.label {
				margin-left: 22rpx;
				color: #666666;
				font-size: 26rpx;
			}

			.caoz_right {
				color: #999999;
				font-size: 28rpx;
			}

		}

		.item_line {
			width: 750rpx;
			height: 19rpx;
			background: #F7F6F6;
		}
	}

	.footer {
		padding: 0 30rpx 80rpx;
		background-color: #fff;
		position: fixed;
		width: 690rpx;
		bottom: 0;

		.btn {
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}
	}
</style>
